<template>
	<view class="particulars">
		<view class="particulars_box">
			<image class="particulars_box_img" src="@/static/member/hldt.png" mode=""></image>
			<view class="particulars_box_position">
				<view class="particulars_box_position_title">
					{{res.title}}
				</view>
				<view class="particulars_box_position_huanying">
					<uni-icons type="home-filled" style="color:rgb(131, 197, 245);"></uni-icons>欢迎光临本店
				</view>
				<view class="particulars_box_position_logo">
					<image :src="res.logo" class="particulars_box_position_logo_img" mode=""></image>
				</view>
			</view>
			<view class="particulars_box_sjjj">
				商家简介
			</view>

			<view class="particulars_box_">
				<uni-icons type="location"></uni-icons>
				{{res.address}}
			</view>


			<view class="particulars_box_" style="margin:20rpx 0;" @click="'null'">
				<uni-icons type="image"></uni-icons>营业时间：{{res.trade_time}}
			</view>


			<view class="particulars_box_" @click.stop="showImage(res.business_license)">
				<text><uni-icons type="image"></uni-icons>营业执照：点击查看营业执照</text>
			</view>
			<view class="particulars_box_" style=' margin-top:20rpx;' @click="makeCall">
				<uni-icons type="phone"></uni-icons>联系商家：{{res.mobile}}
			</view>
			<view class="particulars_box_">
				<uni-icons type="home"></uni-icons>商家简介：
				{{res.introduce === '' || res.introduce === null?'商家暂未设置简介':res.introduce}}
			</view>
			<!-- <view class="particulars_box_">
				<view class="particulars_box_left">
					客服
				</view>
				<view class="particulars_box_right">
					反馈
				</view>
			</view> -->
			<view class="particulars_box_" style=' margin-top:20rpx;'>
				营业状态：{{res.status}}
			</view>
		</view>


		<!-- <view class="particulars_tab">
			<view class="particulars_tab_item" v-for="(item,index) in tabList" :key="index"
				@click="goToTabFun(item.path)">
				<uni-icons :type="item.icon" style="font-size: 50rpx;"></uni-icons>
				<view class="">
					{{item.title}}
				</view>

			</view>
		</view> -->
		<view class="agreement_list_dingwei" v-if="examineflag" @click="showImageFlag">
			<view class="agreement_list_back">
				<image :src="examineImageUrl" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openid: '',
				id: '',
				res: '',
				examineImageUrl: '',
				examineflag: false,
				tabList: []
			}
		},
		onLoad(res) {
			this.openid = res.openid;
			this.id = res.id;
			this.showFun();
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				var css = 'padding-top: 100rpx;'
				this.app_css = css
			}
		},
		methods: {
			backFun() {
				uni.navigateBack({
					delta: 1
				})
			},
			goToTabFun(path) {
				if (path === '/pages/merchant/index') {
					uni.navigateTo({
						url: path
					})
				} else {
					uni.switchTab({
						url: path
					})
				}
			},
			makeCall() {
				uni.makePhoneCall({
					phoneNumber: this.res.mobile,
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.log('拨打电话失败');
					}
				});
			},
			showImage(src) {
				console.log(src);
				this.examineImageUrl = src;
				this.examineflag = true;
				this.stop()
			},
			showImageFlag() {
				this.examineflag = false;
				this.move();
			},
			stop() {
				var box = function(e) {
					passive: false;
				};
				document.body.style.overflow = 'hidden';
				document.addEventListener("touchmove", box, false);
			},
			move() {
				var box = function(e) {
					passive: false
				};
				document.body.style.overflow = ''; // 出现滚动条
				document.removeEventListener("touchmove", box, false);
			},
			showFun() {
				let _this = this;
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.merch.get_merch_detial&app=1',
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						openid: this.openid,
						id: this.id
					},
					success(res) {
						console.log(res);
						_this.res = res.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.particulars {
		width: 100%;
		// padding: 100rpx 0 150rpx 0;

		.particulars_title {
			width: 100%;
			height: 188rpx;
			padding-top: 100rpx;
			position: fixed;
			padding-left: 20rpx;
			top: 0;
			z-index: 1000000;
		}

		.particulars_box {
			width: 100%;
			height: 110vh;
			position: relative;

			.particulars_box_img {
				width: 100%;
				height: 320rpx;
			}

			.particulars_box_position {
				position: absolute;
				width: 90%;
				height: 180rpx;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 0 20rpx;
				top: 280rpx;
				left: 0;
				right: 0;
				margin: 0 auto;
				line-height: 90rpx;

				.particulars_box_position_huanying {
					font-size: 24rpx;
				}

				.particulars_box_position_logo {
					position: absolute;
					right: 60rpx;
					top: -40rpx;

					.particulars_box_position_logo_img {
						width: 150rpx;
						height: 150rpx;
						border-radius: 20rpx;
						border: 1rpx solid #f0f0f0;
					}
				}
			}

			.particulars_box_sjjj {
				margin-top: 200rpx;
				font-size: 34rpx;
				text-align: center;
				font-weight: 700;
				padding: 0 0 20rpx 0;
			}

			.particulars_box_ {
				width: 100%;
				display: flex;
				padding: 30rpx;
				border-top: 2rpx solid #f0f0f0;
				background-color: #fff;
				align-items: center;
			}
		}

		.particulars_tab {
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			text-align: center;
			padding-top: 20rpx;
		}
	}



	.agreement_list_dingwei {
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.2);
		z-index: 2;

		.agreement_list_back {
			width: 50vw;
			height: 40vh;
			border: 1px solid #fff;
			position: absolute;
			top: 20vh;
			left: 0;
			right: 0;
			// bottom:0;
			margin: auto;

			image {
				width: 100%;
			}
		}
	}
</style>